<template>
    <div>
        <el-table :data="tableData" border style="width: 100%" height="450px">
            <el-table-column prop="order_number" label="发货单号" width="100"> </el-table-column>
            <el-table-column prop="create_time" label="开始时间" width="230"> </el-table-column>
            <el-table-column prop="equipment" label="设备id" width="100"> </el-table-column>
            <el-table-column prop="cargotype" label="货物类型" width="100"> </el-table-column>
            <el-table-column prop="scope" label="安全温度"> </el-table-column>
            <el-table-column prop="interval" label="记录间隔"> </el-table-column>
            <el-table-column prop="delayed" label="启动延时" width="80"> </el-table-column>
            <el-table-column prop="end_time" label="结束时间" :formatter="end_time_filter"> </el-table-column>
            <el-table-column prop="state" label="运单状态" :formatter="state_filter"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="showdetail(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import { order } from '../../api/api';
export default {
    data() {
        return {
            tableData: [],
            total: 0,
            currentPage: 0,
            size: 10,
            page: 1
        };
    },
    methods: {
        // 获取所有运单信息
        get_all() {
            order({ params: { size: this.size, page: this.page } }).then(res => {
                this.tableData = res.data.data;
                this.total = res.data.total;
            });
        },
        // 一页多少条数据
        handleSizeChange(val) {
            cargotype({ params: { size: val, page: this.page } }).then(res => {
                this.tableData = res.data.data;
                this.total = res.data.total;
                this.size = val;
            });
        },
        // 跳转到多少页
        handleCurrentChange(val) {
            cargotype({ params: { page: val, size: this.size } }).then(res => {
                this.tableData = res.data.data;
                this.total = res.data.total;
                this.page = val;
            });
        },
        // 查看详情
        showdetail(row) {
            if (row.state == 0) {
                this.$message('运输途中，暂无温度记录');
            } else {
                this.$router.push({ path: '/orderdetail', query: { id: row.id } });
            }
        },
        // 结束时间过滤器
        end_time_filter(row) {
            return row.end_time == '' ? '暂无' : row.end_time != '' ? row.end_time : '未知';
        },
        // 状态过滤器
        state_filter(row) {
            return row.state == 0 ? '在途' : row.state == 1 ? '完成' : row.state == 2 ? '报警' : '未知';
        }
    },
    mounted: function() {
        this.get_all();
    }
};
</script>

<style>
</style>